<template>
  <div class="app-container">

    <el-form :inline="true" :model="formSearch">
      <el-form-item label="角色名称" >
        <el-input
          v-model="formSearch.searchKey"
          type="text"
          placeholder="请输入角色名称"
          size="small"
          style="width: 240px"
        />
      </el-form-item>
            <el-form-item label="状态" >
              <el-select v-model="value" filterable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
      <el-button icon="el-icon-search" circle @click="search(formSearch)"></el-button>
    </el-form>


    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" @click="dialogVisible=true">新增商品分类</el-button>
      </el-col>
    </el-row>

    <el-dialog
      title="创建产品分类"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="父级">
          <el-select v-model="form.region" placeholder="请选择分类">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="分类图标">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
          </el-upload>
        </el-form-item>


        <el-form-item label="排序">
          <el-input-number v-model="form.num" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
        </el-form-item>

        <el-form-item label="状态">
          <el-switch
            v-model="form.is_show"
            class="switch"
            :active-value="1"
            :inactive-value="0"
            active-text="显示"
            inactive-text="不显示"
            @change="change($event)"
          />
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-divider></el-divider>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="cate_name"
        label="分类名称"
        sortable
      >
      </el-table-column>

      <el-table-column align="center" prop="pic" label="商品图片" width="100">
        <template v-slot:default="scope">
          <el-image :src="scope.row.pic"/>
        </template>
      </el-table-column>


      <el-table-column
        prop="sort"
        label="排序">
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.is_show"
            class="switch"
            :active-value="1"
            :inactive-value="0"
            active-text="显示"
            inactive-text="不显示"
            @change="change($event,row)"
          />
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">添加子目录</el-button>
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>

    </el-table>


  </div>
</template>
<script>
//获取分类数据
import {index} from "@/api/productCategory";
//查询
import {searchIndex} from "@/api/productCategory";
//商品分类状态修改
import {chenge} from "@/api/productCategory";

export default {
  name: "ConsulManager",
  data() {
    return {
      //添加分类
      form: {
        name: '',
        num: 1,//排序字段
        is_show: 1,//状态
      },
      //搜索分类
      formSearch: {
        searchKey: '',
        is_show:'',
      },
      options: [{
        value: '1',
        label: '显示'
      }, {
        value: '0',
        label: '不显示'
      }],
      value: '',
      fileList: [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }],
      tableData: [],
      roleType: [{
        label: "显示",
        value: 1
      }, {
        label: "不显示",
        value: 0
      }],
      multipleSelection: [],
      name: '',//input框绑定的输入值
      dialogVisible: false,

    }
  },
  created() {
    this.CategoryData();
  },
  methods: {
    //获取数据
    CategoryData() {
      index().then((response) => {
        console.log(response)
        this.tableData = response.data
      }).catch(error => {
        console.log(error)
      })
    },
    //搜索
    search(data) {
      console.log(data.searchKey);
      searchIndex(data.searchKey).then(res=>{
        console.log(res);
        this.tableData = res.data
      })
    },
    //状态切换
    change(data, row) {
      console.log(data);
      console.log(row.id);
      chenge(row.id).then(res=>{
        console.log(res);
        if (res.code==20000){
          this.$message({
            message:res.msg,
            type:'success',
          })
        }
      }).catch(error=>{
        this.$message.error(res.msg)
      })

      //此处可以请求后端接口更改商品状态
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 32,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }
        ])
      }, 1000)
    },


    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //新增
    onSubmit() {
      console.log('submit!');
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //排序
    handleChange(value) {
      console.log(value);
    }

  },
}
</script>


<style>
/* switch按钮样式 */
.switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}

/*打开时文字位置设置*/
.switch .el-switch__label--right {
  z-index: 1;
}

/* 调整打开时文字的显示位子 */
.switch .el-switch__label--right span {
  margin-right: 9px;
}

/*关闭时文字位置设置*/
.switch .el-switch__label--left {
  z-index: 1;
}

/* 调整关闭时文字的显示位子 */
.switch .el-switch__label--left span {
  margin-left: 9px;
}

/*显示文字*/
.switch .el-switch__label.is-active {
  display: block;
}

/* 调整按钮的宽度 */
.switch.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 60px !important;
  margin: 0;
}
</style>
